<template>
    <div class="answer-card shadow-tint">
      <el-row>
        <el-col align="left" :push="2">
          <div class="tag">
            <h1 style="padding: 20px 10px">答题卡</h1>
          </div>
        </el-col>
      </el-row>
      <el-scrollbar style="height: 100%">
        <div v-for="(item,itemIndex) in localData" :key="item.id">
          <el-row >
            <el-col>
              <div style="font-weight: bold;font-size: 14px;text-align: left;margin-left: 10px">{{getTitle(item)}}</div>
              <ul class=" list box-border">
                <li v-for="q in item.ques"  @click="quesChecked(itemIndex, q.sign, q.index)" :key="q.index+(item.id*1000)" class="fl clearfix">
                  <el-badge  :is-dot="q.tagged" class="item" >
                    <div class="ques-circle" :class="q.status" >
                      {{q.sign}}
                    </div>
                  </el-badge>
                </li>
              </ul>
            </el-col>
          </el-row>
          <el-divider />
        </div>
      </el-scrollbar>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import * as __ from 'lodash'

export default {
  mounted () {
    this.$bus.$on('next-ques', () => {
      // 获取到当前大题
      let temp = this.localData[this.itemIndex]
      // 获取当前索引所在大题的位置（index）
      let index = __.findIndex(temp.ques, (item) => {
        return item.index === this.curIndex
      })
      // 如果index是大题的最后一个
      if (index === (temp.ques.length - 1)) {
        // 判断是不是最后一题
        if (this.itemIndex + 1 === this.localData.length) {
          // 是最后一题，提示
          this.$message.error('已经是最后一题了')
          console.log("caonimade11")
          return
        }
        // 不是，则要到下一大题的第一个
        this.itemIndex++
        index = 0
      } else {
        // 如果不是最后一个，就直接下一题
        index++
      }
      let q = this.localData[this.itemIndex].ques[index]
      this.curIndex++
      this.$bus.$emit('on-card-ques-checked', q.sign, q.index)
    })
    this.$bus.$on('pre-ques', () => {
      // 获取到当前大题
      let temp = this.localData[this.itemIndex]
      // 获取当前索引所在大题的位置（index）
      let index = __.findIndex(temp.ques, (item) => {
        return item.index === this.curIndex
      })
      // 如果index是大题的第一个
      if (index === 0) {
        // 判断是不是所有题目的第一题
        if (this.itemIndex === 0) {
          // 是第一题，提示
          this.$message.error('已经是第一题了')
          console.log("caonimade")
          return
        }
        // 不是，则要到上一大题的最后一个
        this.itemIndex--
        index = this.localData[this.itemIndex].ques.length - 1
      } else {
        // 如果不是最后一个，就直接下一题
        index--
      }
      console.log(this.itemIndex, this.curIndex)
      let q = this.localData[this.itemIndex].ques[index]
      this.curIndex--
      this.$bus.$emit('on-card-ques-checked', q.sign, q.index)
    })
  },
  data () {
    return {
      // 当前index
      curIndex: 1,
      itemIndex: 0
    }
  },
  props: {
    quesData: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapState({
      answerList: ({ contest }) => contest.answerList
    }),
    localData () {
      let index = 1
      this.quesData.forEach((item) => {
        item.ques = []
        for (let i = 1; i <= item.count; i++) {
          item.ques.push({
            sign: i,
            index,
            tagged: false,
            status: this.answerList[index] !== undefined && this.answerList[index] != null ? 'answered' : 'never-answer'
          })
          index++
        }
      })
      return this.quesData
    }
  },
  watch: {
    answerList (value) {
      console.log(value)
    }
  },
  methods: {
    getTitle (item) {
      return item.title + '(共' + item.count + '题，合计' + item.sumScore + '分)'
    },
    quesChecked (itemIndex, sign, index) {
      this.$bus.$emit('on-card-ques-checked', sign, index)
      this.curIndex = index
      this.itemIndex = itemIndex
    }
  }
}
</script>

<style scoped lang="less">
  .answer-card {
    background: white;
    height: 650px;
    border-radius: 3px;
  }

  .tag:before {
    display: block;
    content: "";
    position: absolute;
    top: 26px;
    left: -10px;
    width: 5px;
    height: 22px;
    background: #409EFF;
  }

  .ques-circle {
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid;
    line-height: 28px;
    width: 28px;
    height: 28px;
    float: left;
    margin: 5px;
    padding: 0;
    &.answered {
      background: #409EFF;
      color: white;
    }
    &.never-answer {
      border: 1px solid #DCDFE6;
      color: #DCDFE6;
    }
  }

  .list {
    padding: 10px;
  }
</style>
